<template>
  <div style="margin: 20px">
    <el-card>
      <div style="margin-bottom: 10px; display: flex">
        <el-input class="w-50 m-2" style="width: 150px" placeholder="请输入关键词" v-model="form.keywords" />
        <el-input class="w-50 m-2" style="width: 150px; margin-left: 10px" placeholder="请输入文件类型"
          v-model="form.extension" />
        <el-select style="width: 150px; margin-left: 10px;" placeholder="请选择标签" v-model="form.tagId" :multiple="false">
          <el-option value="0" label="所有"></el-option>
          <el-option v-for="(item, index) in tagList" :key="index" :label="item.tagName" :value="item.id"></el-option>
        </el-select>
        <el-button style="margin-left: 10px" type="primary" @click="get">搜索</el-button>
<!--        <el-button @click="toAdd">上传文件</el-button>-->
      </div>
      <el-table :data="state.tableData" :border="true" highlight-current-row>
        <el-table-column sortable prop="id" label="ID" width="65" />
        <el-table-column sortable prop="fileName" label="文件名称" />
        <el-table-column prop="fileTagsName" label="文件标签" width="150" >
          <template v-slot="scope">
            <el-tag class="ml-2" style="margin-top:2px;margin-bottom: 2px" v-for="item in scope.row.fileTagsName">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable prop="extension" label="扩展名" width="95" />
        <el-table-column prop="releaseCode" label="发文号" width="150" />
        <el-table-column sortable prop="startDate" label="启用日期" width="120" />
        <el-table-column sortable prop="expireDate" label="失效日期" width="120" />
        <el-table-column sortable prop="downloadCount" label="下载次数" width="105" />
        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="scope">
            <el-button link type="primary" size="small" @click="download(scope.row.id)">下载</el-button>
            <el-button link size="small" @click="toEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="是否确认删除该项？" confirm-button-text="是" cancel-button-text="否"
              @confirm="doDel(scope.row.id)">
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" v-model:current-page="form.current" v-model:page-size="form.size"
        :page-sizes="[10, 20, 50]" :small="false" :disabled="false" :background="true"
        layout="total, sizes, prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
    <el-dialog v-model="dlgState.visible" title="编辑政策文件" :width="600" @close="clean">
      <el-form :model="dlgState.form" ref="dlg_form" label-position="left" label-width="90px">
        <el-form-item label="文件名称" prop="name" required>
          <el-input v-model="dlgState.form.fileName" placeholder="例：国家发展改革委、住房城乡建设部关于调整部分行业建设项目财务基准收益率的通知"></el-input>
        </el-form-item>
        <el-form-item label="文件标签" prop="fileTag">
          <el-select multiple style="width: 150px;" placeholder="请选择标签" v-model="dlgState.form.fileTags">
            <el-option v-for="(item, index) in tagList" :key="index" :label="item.tagName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item v-if="dlgState.isAdd" label="文件" prop="file" required>-->
<!--          <el-upload action="#" :auto-upload="false" :multiple="false" :file-list="fileList" :limit="1"-->
<!--            :on-change="changePic" :on-remove="removePic">-->
<!--            <el-button type="primary">点击上传</el-button>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->
        <el-form-item label="发文部门" prop="releaseDepartment">
          <el-input v-model="dlgState.form.releaseDepartment" placeholder="例：国家发展改革委、住房城乡建设部"></el-input>
        </el-form-item>
        <el-form-item label="发文年份" prop="releaseYear">
          <el-input v-model="dlgState.form.releaseYear" style="width: 220px" placeholder="例：2023" />
        </el-form-item>
        <el-form-item label="发文号" prop="releaseNumber">
          <el-input v-model="dlgState.form.releaseNumber" style="width: 220px" placeholder="例：1号" />
        </el-form-item>
        <el-form-item label="启用时间" prop="startTime" required>
          <el-input v-model="dlgState.form.startTime" style="width: 220px" placeholder="例：2000/01/01" />
        </el-form-item>
        <el-form-item label="失效时间" prop="expireTime" required>
          <el-input v-model="dlgState.form.expireTime" style="width: 220px" placeholder="例：2001/01/01" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAdd">返回</el-button>
          <el-button type="primary" @click="doEdit" > 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import router from "@/router";
import basisApi from "@/api/basis/basis";
import basisDict from "@/api/basis/dict";
import policyFilesApi from "@/api/basis/policy"
import policyTagApi from "@/api/basis/policyTag"

declare global {
  interface Date {
    Format(fmt: string): string;
  }
}

// 时间日期格式化
Date.prototype.Format = function (fmt: string) {
  // author: meizz
  var o = {
    "M+": this.getMonth() + 1, // 月份
    "d+": this.getDate(), // 日
    "h+": this.getHours(), // 小时
    "m+": this.getMinutes(), // 分
    "s+": this.getSeconds(), // 秒
    "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
    S: this.getMilliseconds(), // 毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (let k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};


const fileList = ref([]);

// type definition
type project = {
  id: number;
  name: string;
  type: number;
  createTime: Date;
  description: string;
};

// tableData
const form = reactive({
  current: 1,
  keywords: "",
  censorStat: 1,
  extension: "",
  tagId: 0,
  size: 10,
});
const state = reactive({
  total: 0,
  tableData: [] as Array<project>,
});
const handleSizeChange = (val: number) => {
  form.size = val;
  get();
};
const handleCurrentChange = (val: number) => {
  form.current = val;
  get();
};
const get = () => {
  policyFilesApi.get(form).then((res) => {
    if (res.data.code === 200) {
      state.tableData = res.data.data.records;
      state.total = res.data.data.total;
    }
  });
};
// 对话框
const dlg_form = ref();
const dlgState = reactive({
  visible: false,
  form: {
    id:0,
    fileTags: [],
    fileSource: "",
    releaseYear: "",
    releaseDepartment: "",
    releaseNumber: "",
    fileName: "",
    uploadTime: new Date(),
    startTime: "",
    expireTime: "",
    uploadUser: "",
    file: null
  },
});
const cancelAdd = () => {
  dlgState.visible = false;
};
const clean = () => {
  dlgState.form = {
    id:0,
    fileTags: [],
    fileSource: "",
    releaseYear: "",
    releaseDepartment: "",
    releaseNumber: "",
    fileName: "",
    uploadTime: new Date(),
    startTime: "",
    expireTime: "",
    uploadUser: "",
    file: null
  };
};
const toEdit = (row: any) => {
  dlgState.form = row;
  dlgState.visible = true;
};
const doEdit = () => {
  policyFilesApi.update({
    id: dlgState.form.id,
    fileTags: dlgState.form.fileTags,
    fileSource: dlgState.form.fileSource,
    releaseYear: dlgState.form.releaseYear,
    releaseDepartment: dlgState.form.releaseDepartment,
    releaseNumber: dlgState.form.releaseNumber,
    fileName: dlgState.form.fileName,
    startTime: dlgState.form.startTime,
    expireTime: dlgState.form.expireTime,
    censorStat: 1
  }).then((res) => {
    if (res.status === 200) {
      if (res.data.code === 200) {
        ElMessage.success("操作成功");
        get();
      } else {
        ElMessage.error(res.data.message);
      }
      dlgState.visible = false;
    }
  });
};


// 项目删除
const doDel = (id: number) => {
  policyFilesApi.del(id).then((res) => {
    if (res.status === 200) {
      ElMessage.success("删除成功");
      get();
    }
  });
};
// 项目编辑
const editForm = reactive({
  form: {
    name: "",
    type: 1,
    description: "",
  },
});

const download = (id: number) => {
  window.open(`http://localhost:8001/policy/download/${id}`);
  get()
}

// 标签列表
const tagList = ref([] as Array<any>)

const getTag = () => {
  policyTagApi.get().then((res) => {
    tagList.value = res.data.data
    console.log(tagList)
  })
}

onMounted(() => {
  getTag();
  get();
});
</script>
<style lang="scss" scoped>
.tabs>.el-tabs__content {
  width: 100%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.tabs {
  margin: 20px;
}
</style>
<!-- 蚌埠 -->